<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      fixed
      app
    >
      <v-list >
        <v-list-tile  color="#8BC34A">
          <v-list-tile-action>
            <v-icon color="#8BC34A">home</v-icon>
          </v-list-tile-action>
          <v-list-tile-title >Home</v-list-tile-title>
        </v-list-tile>

        <v-list-group
          no-action
          value="true"
          v-for="(menu, i) in nav"
          :key="i"
        >
          <v-list-tile slot="activator" color="#8BC34A">
            <v-list-tile-title  >{{menu.name}}</v-list-tile-title>
          </v-list-tile>
          <v-list-tile
            value="true"
            v-for="(node, j) in menu.items"
            :key="j"
            :to="node.pageRoute"
          >
            <v-list-tile-action >
              <v-icon v-text="node.pageIcon"></v-icon>
            </v-list-tile-action>
            <v-list-tile-title >{{node.pageName}}</v-list-tile-title>
          </v-list-tile>
        </v-list-group>

      </v-list>
    </v-navigation-drawer>

    <v-toolbar color="#8BC34A" dark fixed app>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>潘多拉</v-toolbar-title>
    </v-toolbar>
    <v-content>
            <router-view/>
    </v-content>
    <v-footer color="#212121" app>
      <span class="white--text">&copy; 2018</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data () {
    return {
      drawer: true,
      nav: []
    }
  },
  props: {
    source: String
  },
  mounted: function () {
    this.setNav()
  },
  methods: {
    test: function () {
      alert('test')
    },
    setNav: function () {
      this.nav = [{
        name: '基础管理',
        icon: 'home',
        items: [
          {
            'pageName': '主控制台',
            'pageIcon': 'build',
            'pageRoute': '/Hello/index'
          },
          {
            'pageName': '备份',
            'pageIcon': 'backup',
            'pageRoute': '/Hello/index'
          }
        ]
      },
      {
        name: '人员管理',
        icon: 'home',
        items: [
          {
            'pageName': '人员管理',
            'pageIcon': 'accessibility',
            'pageRoute': '/Hello/index'
          },
          {
            'pageName': '角色任务',
            'pageIcon': 'alarm_on',
            'pageRoute': '/Hello/index'
          },
          {
            'pageName': '权限管理',
            'pageIcon': 'gavel',
            'pageRoute': '/Hello/index'
          }
        ]
      }]
    }
  },
  watch: {

  }
}
</script>
